import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { userDetailAction } from "../../store/actionTypes";
import { UserTopWrap } from "./style";
import { getSizeImage } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";

export default memo(function UserTop(props) {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(userDetailAction(props.id));
  }, [dispatch, props.id]);
  const { userDetailInfo } = useSelector(
    (state) => ({
      userDetailInfo: state.getIn(["userInfo", "userDetailInfo"]),
    }),
    shallowEqual
  );

  const userInfo = userDetailInfo.code == 200 && userDetailInfo;

  const loadd = () => {};
  return (
    <UserTopWrap>
      <div className="user-top-img">
        <img
          src={userInfo ? getSizeImage(userInfo.profile.avatarUrl, 180) : ""}
          alt=""
        />
      </div>
      <div className="user-top-right">
        <div>
          <div className="user-name-box fl clear">
            <span className="user-top-name">
              {userInfo ? userInfo.profile.nickname : ""}
            </span>
            <span className="user-lv icon2">
              {userInfo ? userInfo.level : ""}
              <i className="user-lv-i icon2"></i>
            </span>
            {userInfo ? (
              userInfo.profile.gender == 1 ? (
                <i className="gender imgIcon gender-b"></i>
              ) : userInfo.profile.gender == 2 ? (
                <i className="gender imgIcon gender-g"></i>
              ) : (
                <React.Fragment></React.Fragment>
              )
            ) : (
              <React.Fragment></React.Fragment>
            )}
          </div>
          <div className="user-head-oper fl clear">
            <a className="btn-button send">
              <i>发私信</i>
            </a>
            <a className="btn-button delfollow" style={{ display: "none" }}>
              <i>已关注</i>
            </a>
            <a className="btn-button delfollow-hx" style={{ display: "none" }}>
              <i>相互关注</i>
            </a>
            <a className="btn-button follow">关 注</a>
          </div>
          {userInfo ? (
            userInfo.profile.artistId ? (
              <div className="user-edit clear">
                <a className="button2">
                  <i className="button2">查看歌手页</i>
                </a>
              </div>
            ) : (
              <React.Fragment></React.Fragment>
            )
          ) : (
            <React.Fragment></React.Fragment>
          )}
        </div>
        <div className="djp-box">
          {userInfo ? (
            userInfo.profile.allAuthTypes == undefined ? (
              <React.Fragment></React.Fragment>
            ) : (
              userInfo.profile.allAuthTypes.map((item, index) => {
                return (
                  <p className="djp" key={item.desc}>
                    {item.type == 1 ? (
                      <i className="rz-i icon2"></i>
                    ) : item.type == 4 ? (
                      <i className="yyr-i icon2"></i>
                    ) : item.type == 204 ? (
                      <i className="dr-i icon2"></i>
                    ) : (
                      <React.Fragment></React.Fragment>
                    )}
                    {item.desc}
                    {item.tags != null ? (
                      item.tags.map((itema, indexa) => {
                        return (
                          <span className="yyrtag" key={itema}>
                            {itema}
                          </span>
                        );
                      })
                    ) : (
                      <React.Fragment></React.Fragment>
                    )}
                  </p>
                );
              })
            )
          ) : (
            <React.Fragment></React.Fragment>
          )}
        </div>
        <div className="tab-box">
          <ul>
            <li onClick={loadd}>
              <NavLink
                to={{
                  pathname: "/user/event",
                  search: "?id=" + props.id,
                  state: { id: props.id },
                }}
              >
                <p>{userInfo ? userInfo.profile.eventCount : ""}</p>
                <p>动态</p>
              </NavLink>
            </li>
            <li>
              <NavLink
                to={{
                  pathname: "/user/follows",
                  search: "?id=" + props.id,
                }}
              >
                <p>{userInfo ? userInfo.profile.follows : ""}</p>
                <p>关注</p>
              </NavLink>
            </li>
            <li>
              <NavLink
                to={{
                  pathname: "/user/fans",
                  search: "?id=" + props.id,
                }}
              >
                <p>{userInfo ? userInfo.profile.followeds : ""}</p>
                <p>粉丝</p>
              </NavLink>
            </li>
          </ul>
        </div>
        <div className="inf">
          <p>个人介绍：{userInfo ? userInfo.profile.signature : ""}</p>
        </div>
        <div className="inf">
          <p>所在地区：{userInfo ? userInfo.profile.city : ""}</p>
        </div>
      </div>
    </UserTopWrap>
  );
});
